page {
  width: 100%;
  background-color: #23262D;
  color: #DFDFDF; 
  .content{
    width: 100%;
    .out{
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      .avatar_logout{
      width: 300rpx;
      height: 400rpx;
      border-radius: 50%;      
      image{
        width: 300rpx;
        height: 300rpx;
        margin-bottom: 100rpx;
      }
      .loginBtn{
        width: 150rpx;
        height: 80rpx;
        margin: 0 auto;
        background-color: #fff;
        line-height: 80rpx;
        text-align: center;
        color: #000000;
        font-size: 36rpx;
        }
      }
    }
    .inner{
      width: 100%;
      position: relative;
      .header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 90rpx;
        padding: 0 40rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        image{
          width: 40rpx;
          height: 40rpx;
          margin: 0 12rpx;
        }
      }
      .bgc{
        width: 100%;
        height: 381rpx;
        opacity: 0.5;
        background-image: linear-gradient(122deg, #F25D85 9%, #F1A562 100%);
        border-radius:0 0 58rpx 58rpx;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .info{
        margin-top: 90rpx;
        padding: 36rpx 40rpx;
        width: 100%;
        height: 218rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
          display: flex;
          justify-content: space-between;
          align-items: center;
          image{
            width: 146rpx;
            height: 146rpx;
            margin-right: 34rpx;
          }
          .desc{
            font-size: 24rpx;
            .vip-type{
              width: 198rpx;
              height: 46rpx;
              margin-top: 20rpx;
              line-height: 46rpx;
              text-align: center;
              background: #33363d;
              border-radius: 0.13333rem;
              opacity: 0.7294;
            }
          }
        }
        .right_arrow{
          width: 20rpx;
          height: 60rpx;
        }
      }
      .vip{
        width: 90%;
        height: 136rpx;
        margin: 0 auto;
        padding: 26rpx 42rpx 16rpx 72rpx;
        box-sizing: border-box;
        background-color: #33363D;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        text{
          font-size: 36rpx;
          color: #fff;
        }
        .line{
          width: 4rpx;
          height: 100%;
          margin: 0 30rpx;
          background-color: rgba($color: #fff, $alpha: 0.7);
        }
        .intro{
          font-size: 24rpx;
          opacity: 0.7;
          view{
            line-height: 40rpx;
          }
        }
        image{
          width: 64rpx;
          height: 68rpx;
          margin-left: 90rpx;
        }
      }
      .order{
        background-color: #33363D;
        width: 100%;
        margin-top: 46rpx;
        padding: 20rpx 40rpx 60rpx 40rpx;
        box-sizing: border-box;
        .top{
          width: 100%;
          height: 30rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24rpx;
          opacity: 0.7;
          .right{
            image{
              width: 24rpx;
              height: 24rpx;
              margin-left: 10rpx;
            }
          }
        }
        .list{
          height: 156rpx;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item{
            height: 100%;
            width: 84rpx;
            font-size: 24rpx;
            opacity: 0.7;
            text-align: center;
            image{
              width: 48rpx;
              height: 48rpx;
              margin: 40rpx 18rpx 26rpx;
              box-sizing:border-box;
            }
          }
        }
      }
      .moiveVip{
        width: 100%;
        padding: 20rpx 40rpx;
        margin-top: 44rpx;
        background-color: #33363D;
        box-sizing: border-box;
        .per{
          width: 100%;
          height: 60rpx;
          padding-bottom: 60rpx;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          font-size: 32rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          image{
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
    }  
  }
}